<template>
    <div v-transfer-dom>
        <popup v-model="companyProp"
               width="100%"
               ref="companyProp"
               @on-hide="propHide">
            <div class="company-nav"
                 ref="companyNav">
                <ul>
                    <li v-for="(item,index) in  companyNav"
                        :key="index">
                        <p v-if="index != companyNav.length-1"
                           @click="changeCompanyNav(item,theModel,index)">{{item.Name}}</p>
                        <p v-else>{{item.Name}}</p>
                        <span v-if="index !== companyNav.length-1">/</span>
                    </li>
                </ul>
            </div>
            <div class="company-content-wrap"
                 ref="currentCompany">
                <div class="company-content"
                     v-for="(item,index) in currentCompany"
                     :key="index">
                    <span class="company-name"
                          @click="selectCompanyFn(item)">
                        {{item.Name}}
                    </span>
                    <x-icon type="ios-arrow-right"
                            size="30"
                            v-if="item.Children.length>0"
                            @click="openChild(item)"></x-icon>
                </div>
            </div>
        </popup>
    </div>
</template>
<script>
import { TransferDom, Popup } from 'vux'
export default {
    name: 'companyProp',
    directives: {
        TransferDom
    },
    data () {
        return {
            companyProp: false,
            theModel: [],
            currentCompany: [],
            companyNav: [{ Name: '首页' }],
            userInfo: {}
        }
    },
    components: {
        Popup
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.getCompany()
    },
    props: {
        selectCompany: {
            type: Function
        },
        companyPropShow: {
            type: Boolean,
            default: false
        },
        selectSlef: {
            type: Boolean,
            default: true
        },
        business: {
            default: 'GetHdProjects'
        }
    },
    watch: {
        companyPropShow (newVal) {
            this.companyProp = newVal
        }
    },
    methods: {
        getCompany () {
            let param = {
                'allowPaging': true,
                'business': this.business,
                'data': this.userInfo.deptid,
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': this.userInfo.tokenId,
                'userId': this.userInfo.userId
            }
            this.$axiosAjax.getConfigJson(
                param
            ).then(
                (res) => {
                    this.currentCompany = this.theModel = res.data.data
                }
            )
        },
        openChild (item) {
            this.currentCompany = item.Children
            this.companyNav.push(item)

            this.setCompanyWrapHeight()
        },
        changeCompanyNav (item, theModel, navIndex) {
            if (item.Name == '首页') {
                this.companyNav = [{ Name: '首页' }]
                this.currentCompany = this.theModel
                return false
            }
            for (let i = 0; i < theModel.length; i++) {
                if (theModel[i].Id == item.Id) {
                    this.companyNav = this.companyNav.splice(0, navIndex + 1)
                    this.currentCompany = theModel[i].Children
                    this.setCompanyWrapHeight()
                    return false
                }
            }
            for (let i = 0; i < theModel.length; i++) {
                if (theModel[i].Children.length > 0) {
                    this.changeCompanyNav(item, theModel[i].Children, navIndex)
                }
            }
        },
        setCompanyWrapHeight () {
            this.$nextTick(() => {
                this.$refs.currentCompany.style.height = this.$refs.companyProp.$el.offsetHeight - this.$refs.companyNav.offsetHeight + 'px'
            })
        },
        selectCompanyFn (item) {
            if (!this.selectSlef && (this.userInfo.departsir == '0' || this.userInfo.departsir == '11')) {
                if (this.userInfo.deptid !== item.Id) {
                    this.selectCompany(item)
                }
            } else {
                this.selectCompany(item)
            }
        },
        propHide () {
            this.$parent.companyPropShow = false
        }
    }
}
</script>
<style scoped>
.company-nav {
    min-height: 40px;
    background: rgba(0, 0, 0, 0.1);
    padding: 10px 0;
    overflow-x: scroll;
}
.company-nav ul {
    display: flex;
    align-items: center;
}
.company-nav li {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
    line-height: 28px;
    white-space: nowrap;
}
.company-nav li p {
    color: #419df7;
    padding: 0 5px;
}
.company-nav li:last-child p {
    color: #333;
}
.company-nav span {
    margin-right: 4px;
}
.company-content-wrap {
    height: calc(100% - 40px);
    overflow-y: scroll;
}
.company-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}
.company-name {
    line-height: 24px;
    max-width: 320px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    color: #333;
}
</style>
